<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
    <div class="container">
        <div class="board" :style="{left: boardX + 'px'}"></div>
        <div class="ball" :style="{left: ballX + 'px', top: ballY + 'px'}"></div>
        <h1 v-if="fail" style="text-align: center;">游戏失败</h1>
    </div>
</div>

<script>
    const {createApp, ref, onMounted} = Vue;
    let config = {
        setup() {
            let boardX = ref(0);
            let ballX = ref(0);
            let ballY = ref(0);
            let fail = ref(false);
            let rateX = 1
            let rateY = 1
            let timer
            const keydown = (event) => {
                if (event.key === 'ArrowLeft') {
                    if (boardX.value > 10) {
                        boardX.value -= 20
                    }
                }
                if (event.key === 'ArrowRight') {
                    if (boardX.value < 440 - 80) {
                        boardX.value += 20
                    }
                }
            }
            const enterKeydown = () => {
                document.addEventListener("keydown", keydown)
            }
            onMounted(() => {
                enterKeydown()
                rateX.value = (Math.random() + 0.1)
                rateY.value = (Math.random() + 0.1)
                timer = setInterval(() => {
                    if (ballX.value + rateX >= 440 - 30) {
                        rateX *= -1
                    }
                    if (ballX.value + rateX <= 0) {
                        rateX *= -1
                    }
                    if(ballY.value + rateY <= 0) {
                        rateY *= -1
                    }
                    ballX.value += rateX
                    ballY.value += rateY
                    if (ballY.value >= 440 - 30 - 10) {
                        if (boardX.value <= ballX.value + 30 && boardX.value + 80 >= ballX.value) {
                            rateY *= -1
                        } else {
                            clearInterval(timer)
                            fail.value = true
                        }
                    }
                })
            })
            return {boardX, ballY, ballX, fail};
        },
    };
    createApp(config).mount("#Application");
</script>

<style>
    body {
        margin: 0;
        padding: 0;
    }

    .container {
        position: relative;
        margin: 0 auto;
        width: 440px;
        height: 440px;
        background-color: blanchedalmond;
    }

    .ball {
        position: absolute;
        width: 30px;
        height: 30px;
        left: 0;
        top: 0;
        background-color: orange;
        border-radius: 30px;
    }
    .board {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 10px;
        width: 80px;
        border-radius: 5px;
        background-color: red;
    }
</style>
</body>
</html>